<!--
这个文件定义了一个名为 `Auth` 的 Vue 组件，用于用户认证页面的布局。
组件包含以下部分：
- template: 使用 `el-container` 组件构建页面布局，包含以下内容：
  - `el-main` 作为主要内容区域，包含一个 `el-card` 组件。
    - `el-card` 组件设置了样式以居中显示内容，包含一个 `el-row` 组件。
      - `el-col` 组件用于布局，左侧显示背景图片，右侧显示路由视图。
        - 左侧 `el-col` 包含一个 `div`，其中包含背景图片。
        - 右侧 `el-col` 包含一个 `div`，其中包含 `router-view` 组件，用于渲染当前路由对应的组件。
- style scoped: 定义了样式以设置容器的高度和背景颜色，以及卡片和内容的布局样式。
-->

<template>
    <el-container id="authContainer">
        <el-main id="authContent">
            <el-card id="authCard"
                body-style="height: 100%;width: 100%;padding: 0;display: flex;justify-content: center;align-items: center;">
                <el-row class="full-size">
                    <el-col :span="12" :xs="0">
                        <div class="auth-card-item" id="imageContainer">
                            <img src="@/assets/images/Auth/Background.jpg" class="decoration-image">
                        </div>
                    </el-col>
                    <el-col :span="12" :xs="24">
                        <div class="auth-card-item" id="formContainer">
                            <router-view></router-view>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </el-main>
    </el-container>
</template>

<style scoped>
#authContainer {
    height: 100vh;
    background-color: #2a598a;
}

#authContent {
    display: flex;
    justify-content: center;
    align-items: center;
}

#authCard {
    display: flex;
    border-radius: 25px;
    height: 90%;
    width: 85%;
}

.auth-card-item {
    height: 100%;
    position: relative;
}

.decoration-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.full-size {
    width: 100%;
    height: 100%;
}

#imageContainer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));
    pointer-events: none;
}

#formContainer {
    display: flex;
    flex-direction: column;
}
</style>
